<template>
  <div>
    <h3>
      <i class="ace-icon fa fa-hand-o-right icon-animated-hand-pointer blue"></i>&nbsp;
      <router-link to="/business/course" class="pink">课程名称： {{ course.name }}</router-link>
    </h3>
    <hr>
    <p>
      <!--  从大章返回课程的按钮  -->
      <router-link class="btn btn-white btn-default btn-round" to="/business/course">
        <i class="ace-icon fa fa-arrow-left"></i>
        返回课程
      </router-link>&nbsp;

      <!--  刷新按钮  -->
      <button class="btn btn-white btn-default btn-round" @click="list(1)">
        <i class="ace-icon fa fa-refresh"></i>
        刷新
      </button>&nbsp;

      <!--  新增按钮  -->
      <button class="btn btn-white btn-default btn-round" @click="add()">
        <i class="ace-icon fa fa-edit"></i>
        新增
      </button>
    </p>

    <!--  增加分页组件  -->
    <pagination ref="pagination" v-bind:list="list"></pagination>

    <!-- PAGE CONTENT BEGINS -->
    <table id="simple-table" class="table  table-bordered table-hover">
      <thead>
      <tr>
        <th>课程ID</th>
        <th>章节名称</th>
        <th>操作</th>
      </tr>
      </thead>

      <tbody>
      <tr v-for="chapter in chapters">
        <td>{{ chapter.courseId }}</td>
        <td>{{ chapter.name }}</td>
        <td>
          <div class="hidden-sm hidden-xs btn-group">

            <button class="btn btn-white btn-warning btn-round" @click="toSection(chapter)">
              <i class="ace-icon fa fa-book bigger-120"></i>
              小节
            </button>

            <button class="btn btn-white btn-info btn-round" @click="edit(chapter)">
              <i class="ace-icon fa fa-pencil bigger-120"></i>
              编辑
            </button>

            <button class="btn btn-white btn-danger btn-round" @click="del(chapter.id)">
              <i class="ace-icon fa fa-trash-o bigger-120"></i>
              删除
            </button>

          </div>
        </td>
      </tr>
      </tbody>

      <!--  模态框  -->
      <div id="form-modal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">修改章节</h4>
            </div>
            <!--  模态框主体内容  -->
            <div class="modal-body">

              <!--  模态框中的表单  -->
              <form class="form-horizontal">

                <div class="form-group">
                  <label class="col-sm-2 control-label">课程名称</label>
                  <div class="col-sm-10">
                    <p class="form-control-static">{{ course.name }}</p>
                  </div>
                </div>

                <div class="form-group">
                  <label class="col-sm-2 control-label">章节名称</label>
                  <div class="col-sm-10">
                    <input type="text" v-model="chapter.name" class="form-control" placeholder="名称">
                  </div>
                </div>

              </form>

            </div>

            <!--  模态框底部内容  -->
            <div class="modal-footer">
              <!--  data-dismiss的作用为关闭模态框的事件  -->
              <button type="button" class="btn btn-white btn-lg btn-danger btn-round" data-dismiss="modal">
                <i class="ace-icon fa fa-times red"></i>
                取消
              </button>
              <button type="button" class="btn btn-white btn-lg btn-info btn-round" @click="save()">
                <i class="ace-icon fa fa-save blue"></i>
                保存
              </button>
            </div>

          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->
    </table>
    <!-- PAGE CONTENT ENDS -->

  </div>


</template>

<script>
import Pagination from "../../components/pagination"

export default {
  name: "chapter",
  components: {Pagination},
  mounted: function () {
    let _this = this;
    // 初始化每页显示10条数据
    _this.$refs.pagination.size = 10;
    // 在页面初始化时将缓存的course取出，获取为空时是因为可能会直接访问chapter页面，null.name会报错，{}.name不会报错
    let course = SessionStorage.get(SESSION_KEY_COURSE) || {};
    // 判断是否为空对象
    if (Tool.isEmpty(course)) {
      // 如果是空对象就跳回到欢迎页面
      _this.$router.push("/welcome");
    }
    _this.course = course;
    _this.list(1);

    // 将左侧栏的样式激活
    this.$parent.activeSidebar("business-course-sidebar");
  },
  data: function () {
    return {
      // 用来映射表单的数据
      chapter: {},
      chapters: [],
      course: {},
    }
  },
  methods: {
    list(page) {
      let _this = this;
      // 调用显示延迟框的方法
      Loading.show();
      _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/admin/chapter/list', {
        page: page,
        size: _this.$refs.pagination.size,
        // 根据传来的课程ID去筛选所有的章节
        courseId: _this.course.id
      }).then((result) => {
        // 关闭延迟框的显示
        Loading.hide();
        let response = result.data;
        _this.chapters = response.content.list;
        _this.$refs.pagination.render(page, response.content.total);
      })
    },

    // 当点击新增按钮时触发的事件
    add() {
      let _this = this;
      _this.chapter = {};
      $("#form-modal").modal("show");
    },

    // 当点击编辑按钮时触发的事件
    edit(chapter) {
      let _this = this;
      _this.chapter = $.extend({}, chapter);
      $("#form-modal").modal("show");
    },

    // 编辑和新增大章的调用方法
    save(page) {
      let _this = this;
      // 保存校验
      if (!Validator.require(_this.chapter.name, "名称")
          || !Validator.length(_this.chapter.courseId, "课程ID", 1, 8)) {
        return;
      }
      // 保证courseId一定有值
      _this.chapter.courseId = _this.course.id

      // 调用显示延迟框的方法
      Loading.show();
      _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/admin/chapter/save', _this.chapter).then((result) => {
        // 关闭延迟框的显示
        Loading.hide();
        // 用response来代替result.data
        let response = result.data;
        if (response.success) {
          $("#form-modal").modal("hide");
          _this.list(1);
          Toast.success("大章编辑成功！")
        } else {
          Toast.warning(response.message)
        }
      })
    },
    // 删除大章的调用方法
    del(id) {
      let _this = this;
      Confirm.show("删除大章后不可恢复，确认删除吗？", function () {
        // 调用显示延迟框的方法
        Loading.show();
        _this.$ajax.delete(process.env.VUE_APP_SERVER + '/business/admin/chapter/delete/' + id).then((result) => {
          let response = result.data;
          // 当删除成功时
          if (response.success) {
            // 刷新列表
            _this.list(1);
            // 调用Toast组件的成功效果
            Toast.success("删除大章成功！")
          } // end if

        }) // end then
      })
    },

    // 当点击小节后执行的事件
    toSection(chapter) {
      let _this = this;
      // 将section对象设置到缓存区当中
      SessionStorage.set(SESSION_KEY_CHAPTER, chapter);
      // 跳转到小节页面
      _this.$router.push("/business/section");
    }

  } // methods
};
</script>

<style scoped>

</style>
